<!-- 营收结算月 生成报表 -->
<template>
    <div>
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/profitSettlementPerformance' }">利润结算</el-breadcrumb-item>
            <el-breadcrumb-item>生成报表</el-breadcrumb-item>
        </el-breadcrumb>
        <div>
            <p>选择报表年份</p>
            <el-date-picker
              v-model="cyear"
              type="year"
              placeholder="选择年"
              :picker-options="pickerOptions"
              @change="clearselectedInterval">
            </el-date-picker>
        </div>
    
        <table border="1">
            <tr>
             <th>报表类型</th>
             <th>操作</th>
            </tr>
            <tr>
             <td>利润结算</td>
             <td><a style="text-decoration: none" href="javascript:void(0);" title="" @click="openbindstrandard()">{{bindtips}}</a></td>
            </tr>
        </table>

        <div style="margin: 40px 0 0 180px">    
            <el-button type="primary" @click="generateReport()">生成报表</el-button>
            <el-button type="primary" @click="cancel()">取消</el-button>
        </div>

        <el-dialog
                title="选择利润结算标准"
                :visible.sync="selectDialogVisible"
                width="40%"
                class="dialog"
                center>
            <div>
                <el-row :span="24" :gutter="20">
                    <el-col :span="18">
                        <el-input
                                placeholder="请输入内容"
                                prefix-icon="el-icon-search"
                                size="normal"
                                v-model="version">
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button size="normal" type="primary" @click="searchlist">查询</el-button>
                    </el-col>
                </el-row>

                <div class="mt20" style="margin-left: 60px;height: 400px;overflow-y: auto;">
                    <div class="selectedInterval-item" v-for="item in standardlist" @click="selectradio(item.id)">
                         <div>
                            <el-radio @change="selectradio(item.id)" :label="item.id" v-model="selectedInterval" key="item.id" :value="item.id">&nbsp;</el-radio>
                         </div>
                         <div>
                            <div>提取标准：{{item.extractStandard | filterstand}}</div>
                            <div>佣金来源： {{item.commSource | filterSource}}</div>
                            <div>提取规则： {{item.extractCategory | filterExtractionRule}}</div>
                            <div>计提方式：{{item.extractType ==1 ? '阶段计提':'通提'}}</div>
                            <div>版本：{{item.version}}</div>
                         </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer"  style="text-align: center !important;">
                <el-button type="primary" @click="ensure">绑定</el-button>
                <el-button  @click="selectDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import api from '@/api/apiPath'
    export default {
        data() {
            return {
                bindtips:'绑定标准',
                cyear:undefined,
                selectDialogVisible: false,
                selectDialogInputValue: "",
                selectedInterval: "",
                standardlist:undefined,
                version:undefined,
                bid:undefined,
                pickerOptions:{
                  disabledDate: (time) => {
                       return time.getTime() > Date.now();
                  }
                }
            }
        },
        created() {
            this.getstandard()
        },
        filters:{
            filterstand(val){
                if (val == 1) {
                    return '成交标准'
                }else if(val == 2){
                     return '营收结算标准-月'
                }else if(val == 3){
                     return '营收结算标准-年 '
                }else if(val == 4){
                    return '利润结算标准'
                }
            },
            filterSource(val){
                if (val == 1) {
                    return '项目等级'
                }else if(val == 2){
                    return '开发商类型'
                }else if(val == 3){
                    return '营收利润'
                }
            },
            filterExtractionRule(val){
                if (val == 1) {
                    return '套*金额'
                }else if(val == 2){
                    return '基数*比例'
                }
            },
        },
        methods: {
            clearselectedInterval(){
              this.selectedInterval = ''
              this.bindtips = "绑定标准"
              this.bid = undefined
            },
            searchlist(){
                this.getstandard()
            },
            selectradio(val){
                this.selectedInterval = +val
            },
            getTimeString(timestamp){
                if (!timestamp) {
                    return ''
                }
                const time = new Date(timestamp)
                const year = time.getFullYear() //当前完整年数 （4位 1970-？？？）
                return year
            },
            generateReport(){
                if (typeof this.bid == "undefined") {
                  this.$message({
                      message: '请绑定标准',
                      type: 'warning'
                  });
                  return
                }
                this.$confirm('是否确认生成报表?', '提示', {
                          confirmButtonText: '确定',
                          cancelButtonText: '取消',
                          type: 'warning'
                        }).then(() => {
                            this.axios.post(api.PROSETTLECOMMALLOCATION,{id:this.bid}).then((res) => {
                              if (res && res.data.code == 200) {
                                  this.$message({
                                      message: '生成报表成功',
                                      type: 'success'
                                  });
                                  this.$router.push({path:'/profitSettlementPerformance'})
                               }
                            })
                        }).catch(() => {
                          this.$message({
                            type: 'info',
                            message: '已取消'
                          });          
                 });
            },
            cancel(){
                this.$router.push({path:'/profitSettlementPerformance'})
            },
            ensure(){
                let year= this.getTimeString(this.cyear)
                if (this.selectedInterval =='') {
                  this.$message({
                      message: '请绑定标准',
                      type: 'warning'
                  });
                  return
                }
                if (year == '') {
                  this.$message({
                      message: '请选择日期',
                      type: 'warning'
                  });
                  return
                }
                this.axios.post(api.PROSETTLERULEBANDED,{timeYear:year,prosettleId:this.selectedInterval}).then((res) => {
                  if (res && res.data.code == 200) {
                    this.$message({
                        message: '绑定成功！',
                        type: 'success'
                    });
                    this.bid = res.data.data
                    let interval = this.selectedInterval
                    let arr = this.standardlist.filter(function(item,index,array){
                        return item.id == interval
                    })
                    this.bindtips = arr[0].version
                    this.selectDialogVisible = false
                   }
                }) 
            },
            getstandard(){
              this.axios.post(api.GETSETTLELISTBYPAGEBACK,{version:this.version}).then((res) => {
                if (res && res.data.code == 200) {
                    this.standardlist = res.data.data.list
                 }
              }) 
            },
            openbindstrandard(){
                this.selectDialogVisible = true
            }
        },
    }
</script>

<style scoped lang="stylus">

    table
         border-collapse: collapse
         margin-top: 50px

    table, td, th 
         border: 1px solid #ccc
         
    td, th 
        width: 300px
        height: 40px
        text-align: center
    th 
        background-color: rgb(239, 239, 239)
        

    .selectedInterval-item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        
        > div:first-child {
            width: 50px;
            text-align: center;
        }
        > div:last-child {
            flex: 1;
        }
    }
</style>